<template>
  <el-dialog v-model="dialogTableVisible" title="托单明细" width="800" align-center :show-close='true'>
    <el-table :data="dataList">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column label="时间" width="200" :formatter="dateFormat">
      </el-table-column>
      <el-table-column prop="order_sn" label="托单编号"  width="150"/>
      <el-table-column prop="name" label="拖车司机" />
      <el-table-column prop="penalty_fee" label="扣款" />
      <el-table-column prop="driver_income" label="金额" />
    </el-table>
    <template #footer>
      <el-button type="primary" @click=handleExportExcel>导出明细</el-button>
      <el-button type="primary" @click="dialogTableVisible = false">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { RequestTrailerDetail, RequestExportMonth } from '@/api/path/index'
import { convertTimestampToDate,formatTimeHan } from '@/utils/index'
import moment from "moment"
import { exportFile } from "@/utils/exportFile.js"


const dialogTableVisible = defineModel<boolean>()
const props = defineProps<{ id: Number }>();
const dataList = ref<any[]>([])
watch(() => props.id, (newval, oldval) => {
  RequestTrailerDetail(newval).then((res) => {
    dataList.value = res.resultObj
    console.log(res)
  })
})
function dateFormat(row: any, column: any, cellValue: any, index: number) {
  return convertTimestampToDate(row.created_at)
}

const handleExportExcel = () => {
  let nowDate = moment().format('ll')
  RequestExportMonth(props.id, {
    page: 1,
    rows: 100000,
  }).then((res: any) => {
    if (res.type == 'application/json') {
      ElMessage.error('暂无数据导出')
    } else {
      exportFile(res, `${formatTimeHan(new Date())}拖车结算`);
    }
  });
}

</script>
<style  lang="scss">
.el-dialog{
  .el-dialog__header{
    .el-dialog__title{
      color: white;
    }
  }
}
</style>